<!-- 跟投支付管理 -->
<template>
    <div>
        <el-form :model="searchForm" :inline="true">
            <el-form-item label="项目名称：">
                <el-input v-model="searchForm.projectName" placeholder="请输入项目名称"></el-input>
            </el-form-item>
             <el-form-item label="姓名：">
                <el-input v-model="searchForm.userName" placeholder="请输入姓名"></el-input>
            </el-form-item>
             <el-form-item label="支付状态：">
                <el-select  v-model.trim="searchForm.status"   placeholder="请选择支付状态">
                            <el-option 
                            v-for="({label,value},index) in statusOptions" 
                            :key="index" 
                            :label="label" 
                            :value="value"></el-option>
                        </el-select>
            </el-form-item>
            <el-form-item label="状态：">
               <el-select  v-model.trim="searchForm.locking"   placeholder="请选择状态">
                            <el-option 
                            v-for="({label,value},index) in lockingOptions" 
                            :key="index" 
                            :label="label" 
                            :value="value"></el-option>
                        </el-select>
            </el-form-item>
            <el-form-item label="转让状态：">
                <el-select  v-model.trim="searchForm.assigneeStatus"   placeholder="请选择转让状态">
                            <el-option 
                            v-for="({label,value},index) in assigneeTypeOptions" 
                            :key="index" 
                            :label="label" 
                            :value="value"></el-option>
                        </el-select>
            </el-form-item>
            <el-form-item >
                <el-button type="primary"  @click="searchList(1)" id="monitorEnter">查询</el-button>
            </el-form-item >
        </el-form>
        <table-list 
        :tableData='tableData'
        :tableInfos ='tableInfos'
        :tableChangeBtns='tableChangeBtns'
        :tableFormatter='tableFormatter'
        :activeBtn='tableBtnRule'
        :hasSera='true'
        >
        </table-list>
       <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            style="margin-top:30px"
            :current-page.sync="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="totalSize">
        </el-pagination>
    </div>
</template>
<script>
import api from '@/api/apiPath'
import tableList from './tableList'
export default {
    title:'跟投支付管理',
	components: {
        'table-list':tableList,
        },
	data () {
		return {
            searchForm:{
                status:'',
                locking:'',
                assigneeStatus:'',
            },
            tableInfos:[
                {label:'单号',prop:'orderNumber'},
                {label:'项目名称',prop:'projectName'},
                {label:'姓名',prop:'userName'},
                {label:'工号',prop:'userNum'},
                {label:'职位',prop:'stationName'},
                {label:'业务类型',prop:'businesType'},
                {label:'应付金额（元）',prop:'orderSunAmount'},
                {label:'实付金额（元）',prop:'alreadyAmount'},
                {label:'支付状态',prop:'status'},
                {label:'状态',prop:'locking'},
                {label:'转让状态',prop:'assigneeStatus'},
                {label:'更新时间',prop:'updateTime'},
                {label:'是否逾期',prop:'isOverdue'},
                {label:'操作',prop:'changeBtn'},
            ],
            tableChangeBtns:[
                {label:"查看",type:'view',fn:this.viewList},
                {label:"解锁",type:'unlock',fn:this.viewList},
                ],
            tableData:[],
            statusOptions:[
                {label:"全部",value:""},
                {label:"待支付",value:"1"},
                {label:"部分支付",value:"2"},
                {label:"已支付",value:"3"},
                {label:"已逾期",value:"4"},
                {label:"已终止",value:"5"},
                {label:"已清算",value:"6"},
            ],
            lockingOptions:[
                {label:"全部",value:""},
                {label:"已锁定",value:"1"},
                {label:"已解锁",value:"2"},
            ],
            assigneeTypeOptions:[
                {label:"全部",value:""},
                {label:"转让中",value:0},
                {label:"未转让",value:9},
                {label:"已转让",value:2},
               
            ],
            pageNum: 1,
            pageSize: 10,//每页几条
            totalSize: 0,
        }
    },
    methods:{
        //表格格式化方法。prop对应array下标
        tableFormatter(prop,cellValue){
            if(prop === 'assigneeStatus'){
                let statusMap = {
                    0:'转让中',
                    9:'未转让',
                    2:'已转让'
                }
                return statusMap[cellValue]
            }
            let valueMap = {
                isOverdue:['','否','是'],
                locking:['','已锁定','已解锁'],
                status:['','待支付','部分支付','已支付','已逾期','已终止','已清算'],
                businesType:['','募集','定向','转让'],
            }
            return valueMap[prop]?valueMap[prop][cellValue]:cellValue;
        },
         //按钮显示规则
        tableBtnRule(rowData,btns){
            let [...newbtn] = btns;
            newbtn[1].disabled = !rowData.unlock;
            return newbtn;
        },
        //查看
        viewList(type,idx,row){
            let insideId;
            //if(type != 'add')  insideId= this.tableData[idx].id;
            this.$router.push({path: '/viewInvestmentPay', query: {pageType:type,row:row}})
            
            },
        
        searchList(pageNum){
            let param = {
              pageNum:pageNum||this.pageNum,
              pageSize:this.pageSize,
              ...this.searchForm,
            };
            this.axios.post(api.getInvestmentPayList, param).then(res => {
                if (res.data.code == 200) {
                    let lists = res.data.data.pageInfo.list || [];
                    let staffUser = res.data.data.staffUser;
                     lists = lists.map( list=> {
                        let {orderInfo} = list;
                        return list = {
                            ...orderInfo,
                            //获取职位/部门/业务线
                            stationName:staffUser[orderInfo.userNum]?staffUser[orderInfo.userNum].stationName : '—',
                            departmentName:staffUser[orderInfo.userNum]?staffUser[orderInfo.userNum].departmentName : '—',
                            businessLineName:staffUser[orderInfo.userNum]?staffUser[orderInfo.userNum].businessLineName : '—',

                        };
                    });
                    this.tableData = lists;
                    this.totalSize = res.data.data.pageInfo.total ;
                }
            })
            
        },
        handleCurrentChange () {
            this.searchList()
		},
		handleSizeChange (val) {
			this.pageSize = val
			this.searchList(1)
		},
	},
    activated(){
        this.searchList(1);
    },
	created () {
        this.searchList();
    },
	destroyed() {
		
	},
	filters: {

	}
}

</script>

<style lang="stylus" scoped>


</style>
